<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0; padding: 0;
            }
            div {
                width: 300px; height: 300px;
                background-color:aqua;
            }
            h2 {
                transition: .2s;
            }
        </style>
    </head>
    <body>
        <div></div>
        <textarea name="" id="abc" cols="30" rows="10"></textarea>
        <input type="text">
        <ol>
            <li tit='南村群童欺我老无力'>南村群童欺我老无力</li>
            <li tit='轮番play with me'>轮番play with me</li>
            <li tit='爱意随风起，风止意难平'>爱意随风起，风止意难平</li>
        </ol>
        <h2 style="position:absolute; display:none;width:300px; height: 40px;border:solid 1px green;"></h2>
        <script>
            //题目1：搞个div 左下角  鼠标移动就实时显示鼠标的坐标（注：距离从div左上角开始计算）
            var divbox = document.querySelector('div');
            divbox.onmousemove = function(evt) {
                var e = evt || window.event;
                var heng = e.clientX
                var shu = e.clientY
                this.innerHTML = e.clientX + '.' + e.clientY
                // this.innerHTML  = e.offsetX + ',' + e.offsetYp


                //无序列表悬浮案例
                var liObj = document.querySelectorAll('li')
                for(i=0;i<liObj.length;i++){
                    liObj[i].onmousemove = function(evt) {
                            var e = evt || window.event;
                            var h2Obj = document.querySelector('h2');
                            h2Obj.innerText = this.innerText;
                            h2Obj.style.display = 'inline-block'
                            // h2Obj.style.position = 'absolute'
                            h2Obj.style.left = e.clientX+'px'
                            h2Obj.style.top = e.clientY+10+'px'   
                    }
                    liObj[i].onmouseleave = function(evt) {
                            var e = evt || window.event;
                            var h2Obj = document.querySelector('h2');
                            h2Obj.innerText = this.innerText;
                            h2Obj.style.display = 'none'
                    } 
                }
                











                //ctrl+回车  表单提交  （注：样式不用 主要练习 ctrl+回车   组合键监控
            
                var textObj = document.querySelector('input')
                textObj.onkeydown = function(evt) {
                    var e = evt || window.event;
                    var areaObj = document.querySelector('#abc')
                    
                    if(e.ctrlKey && e.keyCode == 13){
                        areaObj.value = textObj.value;
                    }
                    // if(e.keyCode == 13 && e.ctrlKey){
                    //     alert(textObj.value);
                    // }
                }
            }
        </script>
    </body>
</html>